<template>
  <div class="dashboard">
    <!-- 系统标题 -->
    <h2>学习效果分析</h2>
    <p class="subtitle">选择学生查看其学习效果分析报告</p>

    <!-- 用户选择 -->
    <div class="user-select">
      <h3>用户选择</h3>
      <p>请选择要查看学习效果的学生</p>
      <select v-model="selectedUserId">
        <option value="" disabled>请选择一个用户</option>
        <option v-for="user in users" :key="user.id" :value="user.id">
          {{ user.name }}
        </option>
      </select>
    </div>

    <!-- 学习效果分析 -->
    <div v-if="selectedUser" class="report">
      <h3>{{ selectedUser.name }} 的学习效果分析</h3>
      <p>用户ID: {{ selectedUser.id }}</p>

      <!-- 第一行：成绩趋势 + 学习时长分布 -->
      <div class="row">
        <div class="card">
          <h4>成绩进步趋势</h4>
          <p>最近7次测试成绩变化</p>
          <v-chart class="chart" :option="scoreOption" autoresize />
        </div>
        <div class="card">
          <h4>各科目学习时长</h4>
          <p>本月各科目学习时间分布</p>
          <v-chart class="chart" :option="studyTimeOption" autoresize />
        </div>
      </div>

      <!-- 第二行：技能掌握度 + 学习活跃度 -->
      <div class="row">
        <div class="card">
          <h4>技能掌握程度</h4>
          <p>各项技能熟练度评估</p>
          <v-chart class="chart" :option="skillsOption" autoresize />
        </div>
        <div class="card">
          <h4>每周学习活跃度</h4>
          <p>最近一周每日学习次数</p>
          <v-chart class="chart" :option="activityOption" autoresize />
        </div>
      </div>
    </div>

    <!-- 未选择用户 -->
    <div v-else class="empty-box">
      <p>请先选择一个用户以查看学习效果分析</p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import VChart from "vue-echarts";
import * as echarts from "echarts/core";
import { LineChart, BarChart, PieChart } from "echarts/charts";
import {
  TooltipComponent,
  LegendComponent,
  GridComponent,
  TitleComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  LineChart,
  BarChart,
  PieChart,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  TitleComponent,
  CanvasRenderer,
]);

// 模拟用户数据
const users = [
  {
    id: 1,
    name: "张三",
    scores: [60, 65, 70, 72, 74, 78, 80],
    studyTime: { 数学: 30, 语文: 20, 英语: 25, 物理: 15, 化学: 10 },
    skills: {
      记忆能力: 80,
      理解能力: 75,
      分析能力: 70,
      应用能力: 65,
      创新能力: 60,
    },
    activity: [3, 4, 3, 5, 4, 3, 2],
  },
  {
    id: 2,
    name: "李小红",
    scores: [68, 72, 69, 75, 78, 82, 85],
    studyTime: { 数学: 32, 语文: 24, 英语: 30, 物理: 12, 化学: 9 },
    skills: {
      记忆能力: 85,
      理解能力: 78,
      分析能力: 72,
      应用能力: 76,
      创新能力: 68,
    },
    activity: [4, 3, 3, 4, 3, 3, 2],
  },
];

const selectedUserId = ref("");

// 当前选择的用户
const selectedUser = computed(() =>
    users.find((u) => u.id == selectedUserId.value)
);

// 成绩趋势折线图
const scoreOption = computed(() => ({
  xAxis: { type: "category", data: ["10/1", "10/3", "10/5", "10/7", "10/9", "10/11", "10/13"] },
  yAxis: { type: "value", max: 100 },
  series: [
    {
      type: "line",
      data: selectedUser.value?.scores || [],
      smooth: true,
      lineStyle: { color: "#7c6cf7" },
      itemStyle: { color: "#7c6cf7" },
    },
  ],
}));

// 学习时长柱状图
const studyTimeOption = computed(() => ({
  xAxis: { type: "category", data: Object.keys(selectedUser.value?.studyTime || {}) },
  yAxis: { type: "value" },
  series: [
    {
      type: "bar",
      data: Object.values(selectedUser.value?.studyTime || {}),
      itemStyle: { color: "#6ac48a" },
    },
  ],
}));

// 技能掌握程度饼图
const skillsOption = computed(() => ({
  tooltip: { trigger: "item" },
  series: [
    {
      type: "pie",
      radius: "60%",
      data: Object.entries(selectedUser.value?.skills || {}).map(([k, v]) => ({
        name: k,
        value: v,
      })),
    },
  ],
}));

// 学习活跃度柱状图
const activityOption = computed(() => ({
  xAxis: { type: "category", data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"] },
  yAxis: { type: "value" },
  series: [
    {
      type: "bar",
      data: selectedUser.value?.activity || [],
      itemStyle: { color: "#f5b942" },
    },
  ],
}));
</script>

<style scoped>
.dashboard {
  padding: 20px;
  font-family: "Microsoft YaHei", sans-serif;
}
.subtitle {
  color: #888;
  margin-bottom: 15px;
}
.user-select {
  background: #fff;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.user-select select {
  margin-top: 10px;
  padding: 8px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
}
.report h3 {
  margin: 10px 0;
}
.row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}
.card {
  flex: 1;
  background: #fff;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.chart {
  height: 260px;
}
.empty-box {
  text-align: center;
  padding: 40px;
  color: #888;
  font-size: 16px;
}
</style>
